import React, { Component } from 'react'
import PropTyps from 'prop-types'
import { DatePicker, Icon } from 'antd'
import moment from 'utils/moment'
import Item from './Item'
import { saveOpts, deleteOpts, findListOpts } from 'utils/Api'
import Scrollbar from 'react-smooth-scrollbar'
import locale from 'antd/lib/date-picker/locale/zh_CN'
class Insights extends Component {
  constructor() {
    super()
    this.state = {
      date: moment(),
      items: [],
      open: false,
    }
  }
  componentDidMount() {
    this.update('all')
  }
  onChange = (date) => {
    this.update(date)
  }
  update = (type) => {
    const { landId } = this.props
    const fd = new FormData()
    fd.append('landId', landId)
    if (type === 'all') {

    } else {
      fd.append('startDate', type.format('YYYY/MM/DD'))
      fd.append('endDate', type.format('YYYY/MM/DD'))
    }
    
    findListOpts(fd)
      .then(({msg, result}) => {
        if (msg === '200') {
          this.setState({
            items: result || [],
          })
        }
      })
  }
  addItem = () => {
    const id = Date.now().toString()
    this.setState({
      items: [
        {
          user: undefined,
          date: moment().format('YYYY/MM/DD'),
          content: '',
          key: id,
          edited: true,
          id
        },
        ...this.state.items
      ]
    })
  }
  deleteItem = (id) => {
    this.setState({
      items: this.state.items.filter(item => item.id !== id)
    })
  }
  activeDatePicker = () => {
    this.setState({
      open: !this.state.open,
    })
  }
  handleEndOpenChange = (open) => {
    this.setState({ open })
  }
  disabledDate = (date) => {
    return moment().valueOf() <= date.valueOf()
  }
  render() {
    const { items, date, open } = this.state
    return (
      <Scrollbar>
        <div className='insights'>
          <div className='insights-header'>
            <div className='date'>
              <div className='all' onClick={() => this.update('all')}>
                ALL
              </div>
              <div className='filterDate' >
                <div className='icon-date' onClick={this.activeDatePicker}>
                  <Icon type="calendar"  style={{color: '#fff', fontSize: '14px'}} theme="outlined" />
                </div>
                <DatePicker
                  // disabledDate={this.disabledDate}
                  locale={locale} 
                  onOpenChange={this.handleEndOpenChange}
                  open={open} value={date} onChange={this.onChange} placeholder='选择日期' size={'small'} />
              </div>
            </div>
            <div className='add' onClick={this.addItem}>
              <Icon type="file-add" theme="outlined" />
              <span>新增</span>
            </div>
          </div>
          {
            items.map(item =>
              <Item key={item.id} {...item} {...this.props} saveFunc={saveOpts} deleteFunc={deleteOpts} deleteItem={this.deleteItem} />)
          }
        </div>
      </Scrollbar>
      
    )
  }
}
Insights.propTypes = {
  landId: PropTyps.string
}
export default Insights